/**买单
 * Created by huotaol on 2017/10/12.
 */
import React from "react";
import {Button, Form, InputNumber, message} from "antd";
import request from "@/axios/tools";

const FormItem = Form.Item;

class PayBill extends React.Component {

    static defaultProps = {
        data: {},
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {loading: false};
    }

    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                this.setState({loading: true});
                request({url: '/order/item', method: 'put', params: {...values, id: this.props.data.id}}).then(data => {
                    this.setState({loading: false});
                    this.props.success();
                    this.props.form.setFieldsValue({
                        income: '',
                        change: ''
                    });
                }).catch(e => {
                    this.setState({loading: false});
                    message.warn('提交失败')
                });
            }
        });
    };


    render() {
        const {data} = this.props;
        const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, setFieldsValue} = this.props.form;
        const inputStyle = {width: '100%'};
        const labelStyle = {fontSize: 22};
        return (
            <div className="content-container">
                <label style={labelStyle}>ID ：{data.id}</label>
                <br/>
                <label style={labelStyle}>总价（¥）：{data.cost}</label>

                <Form layout="vertical">
                    <FormItem
                        label={'收入（¥）'}
                    >
                        {getFieldDecorator('income', {
                            rules: [{
                                required: true, validator: (rule, value, callback) => {
                                    if (value >= data.cost) {
                                        callback();
                                        return;
                                    }
                                    callback('收入应大于账单');
                                }
                            }],
                            initialValue: data.income,
                        })(
                            <InputNumber style={inputStyle}/>
                        )}
                    </FormItem>
                    <FormItem
                        label={'找零（¥）'}
                    >
                        {getFieldDecorator('change', {
                            rules: [{
                                required: true, validator: (rule, value, callback) => {
                                    if (value >= 0) {
                                        callback();
                                        return;
                                    }
                                    callback('应大于0');
                                }
                            }],
                            initialValue: data.change
                        })(
                            <InputNumber style={inputStyle}/>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button
                            type="primary"
                            htmlType="submit"
                            onClick={this.handleSubmit}
                            loading={this.state.loading}
                        >
                            提交
                        </Button>
                    </FormItem>
                </Form>
            </div>
        );
    }

}

export default Form.create()(PayBill);
